<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			textarea{
				resize: none;
				vertical-align: middle;
			}
		</style>
		<script type="text/javascript">
			
			let array=[];
			function message(){
				let t1=document.getElementById("t1").value;
				let t2=document.getElementById("t2").value;
				
				//let r="["+t1+"]说:"+t2;
				let r=`[${t1}]说:${t2}`;//使用${变量}拼接字符串
				array.unshift(r);//将留言插入到留言板第一行,数组下标0
				if(array.length>10){
					array.pop();//从尾部删除
				}
				
				document.getElementById("t3").value=array.join("\n");//使用换行分割
				
				
			}
		</script>
	</head>
	<body>
		<form action="">
			
		姓名: <input id="t1" type="text"/> <br>
		留言: <textarea id="t2" rows="3" cols="20" ></textarea>
		<br>
		<input id="b1" type="reset" value="重置" onclick="reset()"/>
		<input id="b2" type="button" value="留言" onclick="message()" />
		<hr>
		</form>
		<textarea  id="t3" rows="10" cols="50" disabled="disabled"></textarea>
	</body>
</html>
